<template>
  <div class="demo">
    <div class="demo-title">栅格列表</div>
    <div class="demo-content">
      <List :grid="{ gutter: 16, column: 4 }" :data-source="data">
        <template #renderItem="{ item }">
          <List.Item>
            <a-card :title="item.title">Card content</a-card>
          </List.Item>
        </template>
      </List>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import List from '@sscd/list';
  interface DataItem {
    title: string;
  }
  const data: DataItem[] = [
    { title: 'Title 1' },
    { title: 'Title 2' },
    { title: 'Title 3' },
    { title: 'Title 4' },
  ];
</script>
